﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }
    <script type="text/javascript" src="~/lib/echarts/extension/dataTool.js?v=@DateTime.Now.Ticks" asp-append-version="true"></script>

    <link href="/css/TestsBoxplot.css?v=@DateTime.Now.Ticks" rel="stylesheet" />
    <title>TestsBoxplot</title>

    <style type="text/css">
        #datagrip {
            color: black;
            font-size: 0.125rem;
            overflow-y: auto;
        }

        .detail {
            color: black;
            height: 3rem;
            width: 100%;
        }

        #datagrip {
            color: black;
            background-color: #dfe4ee;
        }

        thead {
            color: black;
            text-align: center;
            margin: auto;
            position: sticky;
            top: 0;
            background-color: #a2c2e2;
        }

        thead > tr {
            color: black;
            font-size: 0.13rem;
            height: 0.5rem;
        }

        th, td {
            color: black;
            padding: 0.05rem;
            /*border: 1px solid #0aa9cd;*/
            border: 1px solid #c2c3c4;
        }

        tfoot {
            font-size: 0.13rem;
            position: sticky;
            bottom: 0;
            background-color: #a2c2e2; /*#a1e1e1*/
            /*height: 0.45rem;*/
        }

        .ZebraFail {
            color: black;
            background-color: #ffcccc;
        }

        .ZebraAbort {
            color: black;
            background-color: #fff2df;
        }

        .ZebraNo {
            color: black;
            background-color: #e8f1f9;
        }

        .ZebraTo {
            color: black;
            background-color: #ffffff;
        }
        /* 遮罩层样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        /* 模态框内容样式 */
        .modal-content {
            background-color: #0d283f;
            border: 1px solid #007297;
            margin: 10% auto;
            padding: 20px;
            width: 25%;
        }

        .modal-title {
            font-weight: bold;
        }

        /* 关闭按钮样式 */
        .close {
            color: #fff;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        /* 关闭按钮鼠标悬停样式 */
        .close:hover,
        .close:focus {
            color: #0BC4E9;
            text-decoration: none;
            cursor: pointer;
        }

        /*网栅格*/
        .form-flex {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            font-size: 0.15rem;
        }

        .form-flex label {
            font-size: 0.15rem;
            font-weight: bold;
        }

        .form-flex .text {
            background-color: #0D283F;
            height: 100px;
            border: 1px solid #007297;
        }

        .form-flex input,
        .form-flex select,
        .form-flex textarea {
            border-radius: 5px;
            background-color: #0D283F;
            padding: 8px;
            border: 1px solid #007297;
        }

        .modaltable > tbody > tr > td > input,
        .modaltable > tbody > tr > td > select,
        .modaltable > tbody > tr > td > textarea {
            background-color: #0D283F;
            border: 1px solid #007297;
        }

        .form-flex button {
            /*background-color: #4CAF50;*/
            background-color: #07a3fd;
            color: white;
            padding: 0.06rem 0.2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .form-flex button:hover {
            /*background-color: #45a049;*/
            background-color: #2665f8;
        }


        .form-flex > select,
        .form-flex > input,
        .form-flex > textarea {
            background-color: #0D283F;
            border: 1px solid #007297;
        }

        .form-flex > select:hover,
        .form-flex > input:hover,
        .form-flex > textarea:hover {
            background-color: #2C3444;
        }

        button[type="submit"] {
            font-size: .16rem;
            padding: 0.41em 2em;
            text-align: center;
        }
        /*选项卡*/
        .tab {
            overflow: hidden;
            width: 100%;
            height: 0.6rem;
            padding-left: 0.1rem;
            padding-right: 0.2rem;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            /*padding: 14px 16px;*/
            font-size: 0.16rem;
            padding: 0.14rem 0.16rem;
            transition: 0.3s;
            border-bottom: 2px solid #ffffff;
        }

        .tab button:hover {
            background-color: rgba(0, 128, 204, 0.25);
        }

        .tab button.active {
            color: white;
            background-color: rgba(0, 128, 204, 0.15);
            border-bottom: 2px solid #0080cc;
        }

        .tabcontent {
            padding: 6px 12px;
            border-top: none;
            width: 100%;
            height: 4.6rem;
        }

        .remark {
            float: right;
        }

        .required {
            color: red;
            font-weight: bolder;
        }

        .tooltip > p {
            height: 0.25rem;
            line-height: 0.25rem;
        }

        .tooltip > p > label, .tooltip > p > span {
            color: #2C3444;
            height: 0.2rem;
            font-family: Arial;
            font-size: 0.14rem;
            font-weight: bold;
        }

        .tooltip > p > span {
            float: right;
        }
    </style>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="query">
                        <span class="exampleInputProject tle">@Label.Time:</span>
                        <input type="date" id="startdate" name="startdate" placeholder="@Label.Start@Label.Time">
                        <span class="exampleInputProject tle">@Label.To</span>
                        <input type="date" id="enddate" name="enddate" placeholder="@Label.Start@Label.End">
                        <select id="cmb_proj_code" name="Projectcode" placeholder="select Projectcode">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_processes" name="Projectcode" placeholder="select Processes">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_tester" name="Tester" placeholder="select tester">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_testgrade" name="TestGrade" placeholder="select TestGrade">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_testitem" name="TestItem" placeholder="select TestItem">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <button id="btn_query" class="btn btn-primary  btn-sm col-md-12" type="button" onclick="Getdata()">@Label.Query</button>
                    </div>
                    <div style="height: 10.15rem; background-color: white; border-radius: 5px;">
                        <div id="Tab1" class="chart" style="height:95%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        $(document).ready(function () {
            var whei = $(window).height();
            $("html").css({ fontSize: whei / 12.5 });
            $(window).resize(function () {
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    var whei = $(window).height();
                    $("html").css({ fontSize: whei / 12.5 });
                }
                else {
                    var whei = $(window).width();
                    $("html").css({ fontSize: whei / 22 })
                }
            });

            function numberToUpperCase(number) {
                var uppercaseMonths = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Html.Raw(Label.Board_TestTrendAnalysis)");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            //设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    //判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
            //$('#btn_query').prop('disabled', true);
            $('#startdate').on('change', function () {
                $('#enddate').val('');
                var startDate = new Date($(this).val());
                var endDate = new Date($('#enddate').val());
                startDate.setDate(startDate.getDate() + 1);
                var minEndDate = startDate.toISOString().split('T')[0];
                $('#enddate').attr('min', minEndDate);
                if (endDate < startDate) {
                    $('#enddate').val($(this).val());
                }
            });
            $('#enddate').on('change', function () {
                var startDate = new Date($('#startdate').val());
                var endDate = new Date($(this).val());
                var maxDate = new Date(startDate);
                maxDate.setMonth(maxDate.getMonth() + 1);
                if (endDate > maxDate) {
                    $('#enddate').val('');
                    alert('查询范围不能超过一个月！');
                } else {
                    endDate.setDate(endDate.getDate() - 1);
                    var maxStartDate = endDate.toISOString().split('T')[0];
                    $('#startdate').attr('max', maxStartDate);
                    if (startDate > endDate) {
                        $('#startdate').val($(this).val());
                    }
                }
            });
        });

        //下拉框
        $(function () {
            var startDate = new Date();
            startDate.setMonth(startDate.getMonth() - 1);
            var endDate = new Date();
            endDate.setDate(endDate.getDate() + 1);
            $('#startdate').val(startDate.toISOString().split('T')[0]);
            $('#enddate').val(endDate.toISOString().split('T')[0]);

            var proj_code = $("#cmb_proj_code");
            var processes = $("#cmb_processes");
            var tester = $("#cmb_tester");
            var testgrade = $("#cmb_testgrade");
            var testitem = $("#cmb_testitem");
            var pam = {};
            loadData(proj_code, api + '/ReportAction/GetProjCode', true);
            proj_code.change(function () {
                pam.proj_code = $(this).val();
                loadData(processes, api + '/ReportAction/GetTestProcess', true);
            });
            processes.change(function () {
                pam.proj_code = $("#cmb_proj_code").val();
                pam.process_id = $(this).val();
                loadData(tester, api + '/ReportAction/GetTester', false);
            });
            tester.change(function () {
                var header_key = {
                    tester: $(this).val()
                };
                pam.proj_code = $("#cmb_proj_code").val();
                pam.process_id = $("#cmb_processes").val();
                pam.header_key = JSON.stringify(header_key);
                loadData(testgrade, api + '/ReportAction/GetTestGrade', true);
            });
            testgrade.change(function () {
                var header_key = {
                    tester: $("#cmb_tester").val(),
                    grade: $(this).val(),
                    start: $("#startdate").val(),
                    end: $("#enddate").val()
                };
                pam.proj_code = $("#cmb_proj_code").val();
                pam.process_id = $("#cmb_processes").val();
                pam.header_key = JSON.stringify(header_key);
                loadData(testitem, api + '/ReportAction/GetTestItem', true);
            });
            $('#cmb_proj_code').val('NCCSAD').trigger('change');
            $('#cmb_processes').val('SIOB_BOND_PIC').trigger('change');
            $('#cmb_tester').val('ALL').trigger('change');
            $('#cmb_testgrade').val('NORMAL').trigger('change');
            $('#cmb_testitem').val('AFTER_UV').trigger('change');
            Getdata();
            function loadData(selectElement, url, boolean) {
                $.ajax({
                    type: "POST",
                    url: url,
                    data: pam,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        selectdata = data.ReturnData;
                        selectElement.empty();
                        if (selectdata.length <= 0) {
                            var option = "<option>@Html.Raw(Label.No+Label.Correlation+Label.Data)</option>";
                            selectElement.append(option);
                            return;
                        }
                        if (boolean) {
                            selectElement.append("<option value='-1'>@Html.Raw(Label.PleaseSelect)...</option>");
                        } else {
                            selectElement.append("<option value='ALL'>@Html.Raw(Label.ALL)</option>");
                        }
                        $.each(selectdata, function (key, value) {
                            selectElement.append($('<option>', {
                                value: value.value,
                                text: value.text
                            }));
                        });
                    }
                });
            }
        });

        //初始化图表
        var memachinetype;
        var chartIds = ['Tab1'];
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }

        //Tab页签定时切换
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            //每隔5m执行一次
            Tabtimer = setInterval(function () {
                var endDate = new Date($("#enddate").val());
                if (endDate > new Date()) {
                    Getdata();
                    echartsautomatic();
                }
            }, 10 * 60 * 1000);
        }

        //必选条件
        function stateselected() {
            var state = false;
            if ($('#cmb_proj_code').prop('selectedIndex') > 0 && $("#startdate").val() && $("#enddate").val()) {
                state = true;
            }
            return state;
        }

        var isclick = true;
        var chartdata;
        var Getdata = function () {
            if (stateselected() && isclick) {
                $('#btn_query').prop('disabled', true);
                isclick = false;
                var header_key = {
                    tester: $("#cmb_tester").val(),
                    testgrade: $("#cmb_testgrade").val(),
                    testitem: $("#cmb_testitem").val(),
                    start: $("#startdate").val(),
                    end: $("#enddate").val()
                };
                var pam = {};
                pam.proj_code = $("#cmb_proj_code").val();
                pam.process_id = $("#cmb_processes").val();
                pam.header_key = JSON.stringify(header_key);
                $.ajax({
                    type: "POST",
                    url: api + "/ReportAction/TestItmeBoxplot",
                    data: pam,
                    async: false,
                    dataType: "json",
                    success: function (dt) {
                        isclick = true;
                        $('#btn_query').prop('disabled', false);
                        chartdata = dt.ReturnData;
                        boxplotChart();
                        //echartsautomatic();
                        //TabInterval();
                    }
                });
            }
        }

        // 箱线图
        var boxplotChart = function () {
            btn_datagrip_type = true;
            $("#datagrip, #datagrip_query").remove();
            var btn_datagrip_html = `
            <div id="datagrip_query" class="query" style="height: 5%; border:0px;">
                <button id="btn_datagrip" class="btn btn-primary  btn-sm col-md-12" type="button" onclick="datagrip_type()">数据列表</button>
            </div>`;
            $("#Tab1").before(btn_datagrip_html);
            $("#btn_datagrip").text("数据列表");
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById("Tab1");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            // 将数据按TESTER和每小时的TEST_TIME分组
            var groupedData = chartdata.reduce(function (acc, item) {
                var tester = item.TESTER;
                var testTime = new Date(item.TEST_TIME);
                var hour = `${testTime.getFullYear()}-${testTime.getMonth() + 1}-${testTime.getDate()} ${testTime.getHours()}:00`;

                if (!acc[tester]) {
                    acc[tester] = {};
                }
                if (!acc[tester][hour]) {
                    acc[tester][hour] = [];
                }
                acc[tester][hour].push(item.ITEM_VALUE);
                return acc;
            }, {});

            // 计算箱线图的五个值（最小值、第一四分位数、中位数、第三四分位数、最大值）
            function calculateBoxPlotData(values) {
                values.sort((a, b) => a - b);
                var min = values[0];
                var max = values[values.length - 1];
                var median = values[Math.floor(values.length / 2)];
                var q1 = values[Math.floor(values.length / 4)];
                var q3 = values[Math.floor(values.length * 3 / 4)];
                return [min, q1, median, q3, max];
            }

            // 生成series数据
            var seriesData = [];
            var medianData = [];
            var categories = [];
            var subCategories = [];
            for (var tester in groupedData) {
                for (var hour in groupedData[tester]) {
                    categories.push(hour);
                    subCategories.push(`${tester}`);
                    var boxPlotData = calculateBoxPlotData(groupedData[tester][hour]);
                    seriesData.push(boxPlotData);
                    medianData.push(boxPlotData[2]); // 中位数
                }
            }
            //散点图
            var scatterSeriesData = [];
            for (var tester in groupedData) {
                for (var hour in groupedData[tester]) {
                    var scatterData = groupedData[tester][hour].map(function (item) {
                        return [hour, item]; // [x, y]
                    });
                    scatterSeriesData.push({
                        name: `${tester}`,
                        type: 'scatter',
                        data: scatterData,
                        symbolSize: 8,
                        itemStyle: {
                            color: '#ff7f0e',
                        }
                    });
                }
            }

            // 指定图表的配置项和数据
            var option = {
                textStyle: {
                    color: '#666',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '5%',
                    left: '5%',
                    bottom: '25%',
                    right: '5%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: categories,
                        boundaryGap: true,
                        nameGap: 30,
                        nameLocation: "middle",
                        axisLabel: {
                            show: true,
                            color: '#666',
                            fontSize: '0.14rem'
                        },
                        splitArea: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                        position: 'bottom',
                    },
                    {
                        type: 'category',
                        data: subCategories,
                        boundaryGap: true,
                        nameGap: 30,
                        nameLocation: "middle",
                        axisLabel: {
                            show: true,
                            rotate: 45,
                            color: '#666',
                            fontSize: '0.14rem'
                        },
                        splitArea: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                        position: 'bottom',
                        offset: 40
                    }
                ],
                yAxis: {
                    type: 'value',
                    name: `${$("#cmb_testitem").val()}`,
                    nameGap: 45,
                    nameLocation: "center",
                    nameTextStyle: {
                        fontSize: "0.16rem",
                        align: "left",
                        color: "#666"
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666',
                            fontSize: '0.14rem'
                        }
                    },
                    splitArea: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: parseInt(60 / subCategories.length * 100),
                        xAxisIndex: [0, 1],
                        //zoomOnMouseWheel: false
                    },
                    {
                        type: 'slider',
                        start: 0,
                        end: parseInt(60 / subCategories.length) * 100,
                        xAxisIndex: [0, 1],
                        handleSize: 0,
                        //zoomLock: true
                    }
                ],
                series: [
                    {
                        name: 'ITEM_VALUE',
                        type: 'boxplot',
                        data: seriesData,
                        itemStyle: {
                            color: '#1f78b4',
                            borderColor: '#1f78b4',
                            borderWidth: 2,
                        }
                    },
                    {
                        name: 'Median',
                        type: 'line',
                        data: medianData,
                        lineStyle: {
                            color: '#ff0000',
                            width: 2
                        },
                        itemStyle: {
                            color: '#ff0000'
                        },
                        smooth: true
                    }
                    //...scatterSeriesData
                ]
            };
            if ($("#cmb_tester").val() != "ALL") {
                option.series = option.series.concat(scatterSeriesData);
            }
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        };

        var btn_datagrip_type = false;
        var datagrip_type = function () {
            if (btn_datagrip_type) {
                DataGrip();
            }
            else {
                boxplotChart();
            }
        }
        // 数据列表
        var DataGrip = function () {
            btn_datagrip_type = false;
            var chartDom = document.getElementById("Tab1");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            $("#datagrip").remove();
            //动态生成表头
            var grip_header = "";
            var grip_header_keys = Object.keys(chartdata[0]);
            grip_header_keys.forEach(function (header) {
                grip_header = grip_header + '<th>' + header + '</th>';
            });

            //生成表体内容
            var input = chartdata.length;
            var fail = 0;
            var abort = 0;
            var pass = 0;
            var grip_tabtbody = '';
            chartdata.forEach(function (row, index) {
                index++;
                var grip_tdbody = '';
                grip_header_keys.forEach(function (header, columnindex) {
                    if (header === "RESULT" && row[header] === "PASS") {
                        pass = pass + 1;
                    }
                    if (header === "RESULT" && row[header] === "FAIL") {
                        fail = fail + 1;
                    }
                    if (header === "RESULT" && row[header] === "ABORT") {
                        abort = abort + 1;
                    }
                    var zebra = (header === "RESULT") ? ((row[header] === "FAIL") ? "ZebraFail" : (row[header] === "ABORT") ? "ZebraAbort" : null) : (columnindex < 0 ? "ZebraTo" : null);
                    grip_tdbody = grip_tdbody + `<td class="truncate ${zebra}">${header.includes("TIME") ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;

                });
                var grip_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${grip_tdbody}</tr>`;
                grip_tabtbody = grip_tabtbody + grip_trbody;
            });
            var datagrip_html = `
            <div id="datagrip" class="detail" style="color:black;width: 100%; height: 98.5%;">
                <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                    <thead><tr>${grip_header}</tr></thead>
                    <tbody id="yield_tbody">${grip_tabtbody}</tbody>
                    <tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>INPUT:${input}</td><td>FAIL:${fail}</td><td>ABORT:${abort}</td><td>PASS:${pass}</td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>
                </table>
            </div>`;
            $("#Tab1").append(datagrip_html);
            $("#btn_datagrip").text("数据分析");
            //$("#datagrip").css({ "color": "black", "font-size": "0.125rem", "overflow-y": "auto" });
        }

        //chart
        var primeyield_optionloop;
        function primeyieldChart() {
            if (primeyield_optionloop) {
                //primeyield_optionloop.clearLoop();
                primeyield_optionloop = null;
            }
            primeyield_optionloop = tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

    </script>
</body>
</html>
